<template>
  <div class="slider" :style="{ top, height }">
    <div
      class="readText"
      @click="dialogVisibleEdg = true"
      :style="{
        top: lineNumber == 5 ? '-38px' : textTop,
        left:
          lineNumber == 5
            ? '64.0%'
            : lineNumber == 1 || lineNumber == 4
            ? '40px'
            : '95px',
      }"
      v-if="glassPostionD.length != 0"
    >
      {{ glassPostionD.length }}
    </div>
    <div
      class="glassLeft"
      :style="{
        top: lineNumber == 2 ? '71%' : '30%',
      }"
      v-if="glassData.length && (lineNumber == 2 || lineNumber == 3)"
      @click="handlerDialog"
    >
      {{ glassData.length }}
    </div>
    <div class="silder_view">
      <div
        class="glass_slider"
        :style="{
          top: isBottom ? 'none' : '55px',
          bottom: isBottom ? '10px' : 'none',
        }"
        v-for="item in glassPostionA"
        :key="item.id"
        :class="`A${lineNumber}${item.id}`"
        @click="openGlassInfo([...item])"
      ></div>
      <div
        class="glass_slider"
        :style="{
          top: isBottom ? 'none' : '55px',
          bottom: isBottom ? '10px' : 'none',
        }"
        v-for="item in glassPostionB"
        :key="item.id"
        :class="`A${lineNumber}${item.id}`"
        @click="openGlassInfo([...item])"
      ></div>
      <div
        class="glass_slider"
        :style="{
          top: isBottom ? 'none' : '55px',
          bottom: isBottom ? '10px' : 'none',
        }"
        v-for="item in glassPostionC"
        :key="item.id"
        :class="`A${lineNumber}${item.id}`"
        @click="openGlassInfo([...item])"
      ></div>
      <div
        class="glass_slider"
        :style="{
          top: isBottom ? 'none' : '55px',
          bottom: isBottom ? '10px' : 'none',
        }"
        v-for="item in glassPostionD"
        :key="item.id"
        :class="`A${lineNumber}${item.id}`"
        @click="openGlassInfo([...item])"
      ></div>
      <div
        class="glass_length"
        v-if="datalength != 0 && showLength.oneLength > 0"
        :style="{
          top: glassTotal[0][lineNumber - 1].top,
          right: glassTotal[0][lineNumber - 1].right,
        }"
        @click="openGlassInfo('glassPostionA')"
      >
        {{ showLength.oneLength }}
      </div>
      <div
        class="glass_length2"
        v-if="datalength != 0 && showLength.twoLength > 0"
        :style="{
          top: glassTotal[1][lineNumber - 1].top,
          right: glassTotal[1][lineNumber - 1].right,
          height: lineNumber == 5 ? '35px' : '25px',
          width: lineNumber == 5 ? '35px' : '35px',
        }"
        @click="openGlassInfo('glassPostionB')"
      >
        {{ showLength.twoLength }}
      </div>
      <div
        class="glass_length2"
        v-if="datalength != 0 && showLength.threeLength > 0"
        :style="{
          top: glassTotal[2][lineNumber - 1].top,
          right: glassTotal[2][lineNumber - 1].right,
          height: lineNumber == 5 ? '35px' : '25px',
          width: '35px',
        }"
        @click="openGlassInfo('glassPostionC')"
      >
        {{ showLength.threeLength }}
      </div>
    </div>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="showTableData" />
    </el-dialog>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg2"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable
        :tableData="glassInfo"
        @updateNumber="updateNumber"
        @updateTable="updateTable"
        showCameraBtn
      />
    </el-dialog>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg3"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="glassData" />
    </el-dialog>
  </div>
</template>

<script>
import anime from "animejs";
import glassTable from "@/views/components/production/glassTable.vue";
export default {
  components: {
    glassTable,
  },
  name: "silder",
  props: {
    textTop: {
      type: String,
      default: "0px",
    },
    height: {
      type: String,
      default: "20%",
    },
    top: {
      type: String,
      default: "0",
    },
    isBottom: {
      type: Boolean,
      default: false,
    },
    glassPostionA: {
      type: Array,
      default: () => {
        return [];
      },
    },
    glassPostionB: {
      type: Array,
      default: () => {
        return [];
      },
    },
    lineNumber: {
      type: Number,
      default: 1,
    },
    glassPostionC: {
      type: Array,
      default: () => {
        return [];
      },
    },
    glassPostionD: {
      type: Array,
      default: () => {
        return [];
      },
    },
    glassData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      initTime: true,
      count: 0,
      completeGlass1: [],
      completeGlass2: [],
      line1: [],
      moveIndex: 0,
      useLine: [],
      useLine2: [],
      useLine3: [],
      useLine4: [],
      line2: 0,
      dialogVisibleEdg: false,
      dialogVisibleEdg2: false,
      dialogVisibleEdg3: false,
      glassInfo: [],
      glassTotal: [
        [
          {
            right: "50px",
            top: "60px",
          },
          {
            right: "32px",
            top: "52px",
          },
          {
            right: "35px",
            top: "10px",
          },
          {
            right: "50px",
            top: "13px",
          },
          {
            right: "220px",
            top: "175px",
          },
        ],
        [
          {
            right: "350px",
            top: "65px",
          },
          {
            right: "320px",
            top: "58px",
          },
          {
            right: "330px",
            top: "10px",
          },
          {
            right: "350px",
            top: "17px",
          },
          {
            right: "650px",
            top: "20px",
          },
        ],
        [
          {
            right: "460px",
            top: "65px",
          },
          {
            right: "400px",
            top: "58px",
          },
          {
            right: "400px",
            top: "10px",
          },
          {
            right: "460px",
            top: "17px",
          },
          {
            right: "1140px",
            top: "-60px",
          },
        ],
        [
          {
            right: "460px",
            top: "65px",
          },
          {
            right: "400px",
            top: "58px",
          },
          {
            right: "400px",
            top: "10px",
          },
          {
            right: "460px",
            top: "17px",
          },
          {
            right: "50px",
            top: "13px",
          },
        ],
        [
          {
            right: "460px",
            top: "65px",
          },
          {
            right: "400px",
            top: "58px",
          },
          {
            right: "400px",
            top: "10px",
          },
          {
            right: "460px",
            top: "17px",
          },
          {
            right: "50px",
            top: "13px",
          },
        ],
      ],
      showLength: {
        oneLength: 0,
        twoLength: 0,
        threeLength: 0,
        fourLength: 0,
      },
      showGlassPostion: "",
    };
  },
  methods: {
    updateTable() {
      this.glassInfo =
        typeof this.showGlassPostion == "string"
          ? this[this.showGlassPostion]
          : this.showGlassPostion;
    },
    updateNumber() {
      if (this.showGlassPostion == "glassPostionA") {
        this.showLength.oneLength = this.glassPostionA.length;
      }
      if (this.showGlassPostion == "glassPostionB") {
        this.showLength.twoLength = this.glassPostionB.length;
      }
      if (this.showGlassPostion == "glassPostionC") {
        this.showLength.threeLength = this.glassPostionC.length;
      }
    },
    initData() {
      this.showLength = {
        oneLength: this.glassPostionA.length,
        twoLength: this.glassPostionB.length,
        threeLength: this.glassPostionC.length,
        fourLength: this.glassPostionD.length,
      };
      let arr = this.glassPostionA.map((item) => item.id);
      let arr2 = this.glassPostionB.map((item) => item.id);
      let arr3 = this.glassPostionC.map((item) => item.id);
      let arr4 = this.glassPostionD.map((item) => item.id);
      sessionStorage.setItem("useLine" + this.lineNumber, JSON.stringify(arr));
      sessionStorage.setItem(
        "useLine2" + this.lineNumber,
        JSON.stringify(arr2)
      );
      sessionStorage.setItem(
        "useLine3" + this.lineNumber,
        JSON.stringify(arr3)
      );
      sessionStorage.setItem(
        "useLine4" + this.lineNumber,
        JSON.stringify(arr4)
      );
    },
    handlerDialog() {
      this.dialogVisibleEdg3 = true;
    },
    //分流动画
    animeGlass(index, delay = 0, className) {
      let that = this;
      if (this.lineNumber == 1 || this.lineNumber == 4) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: 40,
              translateY: 5,
              duration: 1,
            },
            { translateX: -49, duration: 4000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          complete() {
            that.showLength.oneLength = that.glassPostionA.length;
          },
        });
      } else if (this.lineNumber == 2) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: 40,
              translateY: -90,
              duration: 1,
            },
            { translateX: 0, duration: 2000 },
            { translateY: -3, duration: 3000 },
            { translateX: -35, duration: 3000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          complete() {
            that.showLength.oneLength = that.glassPostionA.length;
          },
        });
      } else if (this.lineNumber == 3) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: 40,
              translateY: 88,
              duration: 1,
            },
            { translateX: 0, duration: 2000 },
            { translateY: 2, duration: 3000 },
            { translateX: -35, duration: 3000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          complete() {
            that.showLength.oneLength = that.glassPostionA.length;
          },
        });
      } else if (this.lineNumber == 5) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: -110,
              translateY: 120,
              duration: 1,
            },
            { translateX: -220, duration: 4000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          complete() {
            that.showLength.oneLength = that.glassPostionA.length;
          },
        });
      }
    },
    //经过磨边机-翻转台-磨边机-清洗机动画
    animeGlass2(index, className, postion) {
      let that = this;
      if (index == 1 || index == 4) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: -40,
              translateY: 0,
              duration: 1,
            },
            { translateX: -130, duration: 1500 },
            { translateX: -170, translateY: 5, rotate: 90, duration: 1000 },
            { translateX: -355, duration: 2000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          begin: () => {
            that.showLength.oneLength = that.glassPostionA.length;
          },
          complete: () => {
            that.showLength.twoLength = that.glassPostionB.length;
          },
        });
      } else if (index == 2) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: -30,
              translateY: -5,
              rotate: 0,
              duration: 1,
            },
            { translateX: -130, duration: 2000 },
            { translateX: -170, translateY: -2, rotate: 90, duration: 1000 },
            { translateX: -324, duration: 2000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          begin: () => {
            that.showLength.oneLength = that.glassPostionA.length;
          },
          complete: function () {
            that.showLength.twoLength = that.glassPostionB.length;
          },
        });
      } else if (index == 3) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: 0,
              translateY: 0,
              duration: 0,
            },
            { translateX: -130, duration: 2000 },
            { translateX: -170, translateY: 0, rotate: 90, duration: 1000 },
            { translateX: -320, duration: 2000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          begin: () => {
            that.showLength.oneLength = that.glassPostionA.length;
          },
          complete: function () {
            that.showLength.twoLength = that.glassPostionB.length;
          },
        });
      } else if (index == 5) {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: -220,
              translateY: 120,
              duration: 0,
            },
            { translateX: -430, duration: 4000 },
            { translateX: -430, translateY: -35, duration: 4000 },
            { translateX: -635, translateY: -35, duration: 4000 },
            {
              background: "rgba(166, 202, 240, 0)",
              duration: 1,
            },
          ],
          easing: "linear",
          loop: false,
          begin: () => {
            that.showLength.oneLength = that.glassPostionA.length;
          },
          complete: function () {
            that.showLength.twoLength = that.glassPostionB.length;
          },
        });
      }
    },
    //清洗机启动后排列
    animeGlass3(className, index) {
      let that = this;
      if (this.lineNumber == 1 || this.lineNumber == 4) {
        this.$nextTick(() => {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateY: 5,
                translateX: -355,
                rotate: 90,
                duration: 1,
              },
              {
                translateX: -450,
                duration: 5000,
              },
              {
                background: "rgba(166, 202, 240, 0)",
                duration: 1,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.twoLength = that.glassPostionB.length;
            },
            complete: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        });
      } else if (this.lineNumber == 2) {
        this.$nextTick(() => {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateX: -324,
                translateY: -2,
                rotate: 90,
                duration: 1,
              },
              {
                translateX: -400,
                duration: 5000,
              },
              {
                background: "rgba(166, 202, 240, 0)",
                duration: 1,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.twoLength = that.glassPostionB.length;
            },
            complete: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        });
      } else if (this.lineNumber == 3) {
        this.$nextTick(() => {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateX: -324,
                translateY: 0,
                rotate: 90,
                duration: 1,
              },
              {
                translateX: -400,
                duration: 5000,
              },
              {
                background: "rgba(166, 202, 240, 0)",
                duration: 1,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.twoLength = that.glassPostionB.length;
            },
            complete: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        });
      } else if (this.lineNumber == 5) {
        this.$nextTick(() => {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateX: -635,
                translateY: -35,
                duration: 1,
              },
              {
                translateX: -1100,
                translateY: -35,
                duration: 10000,
              },
              {
                translateX: -1100,
                translateY: -125,
                duration: 3000,
              },
              {
                background: "rgba(166, 202, 240, 0)",
                duration: 1,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.twoLength = that.glassPostionB.length;
            },
            complete: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        });
      }
    },
    animeGlass4(className, index) {
      let er = {
        1: 0,
        2: 0,
        3: 10,
        4: 0,
      };
      let that = this;
      this.$nextTick(() => {
        if (this.lineNumber == 1 || this.lineNumber == 4) {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateY: er[this.lineNumber],
                translateX: -450 + index * 40,
                rotate: 90,
                duration: 1,
              },
              {
                translateX: -500,
                duration: 2000,
              },
              {
                background: "rgba(0,0,0,0)",
                duration: 500,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        } else if (this.lineNumber == 2 || this.lineNumber == 3) {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateY: er[this.lineNumber],
                translateX: -400 + index * 40,
                rotate: 90,
                duration: 1,
              },
              {
                translateX: -450,
                duration: 2000,
              },
              {
                background: "rgba(0,0,0,0)",
                duration: 500,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        } else {
          anime({
            targets: className,
            keyframes: [
              {
                background: "#23a8f2",
                translateX: -655,
                translateY: -35,
                duration: 1,
              },
              {
                translateY: -95,
                duration: 2000,
              },
              {
                background: "rgba(0,0,0,0)",
                duration: 500,
              },
            ],
            easing: "linear",
            loop: false,
            begin: () => {
              that.showLength.threeLength = that.glassPostionC.length;
            },
          });
        }
      });
    },
    openGlassInfo(event) {
      this.showGlassPostion = event;
      this.glassInfo = typeof event == "string" ? this[event] : event;
      this.dialogVisibleEdg2 = true;
    },
  },
  created() {},
  mounted() {},
  watch: {
    glassPostionA: {
      handler(newValue, oldValue) {
        this.glassInfo = this[this.showGlassPostion];
        if (newValue.length != 0) {
          this.useLine =
            JSON.parse(sessionStorage.getItem("useLine" + this.lineNumber)) ||
            [];
          newValue.forEach((item, index) => {
            if (this.useLine.includes(item.id)) return;
            this.useLine.push(item.id);
            sessionStorage.setItem(
              "useLine" + this.lineNumber,
              JSON.stringify(this.useLine)
            );
            this.$nextTick(() => {
              this.animeGlass(
                item.lineIndex,
                index,
                ".A" + this.lineNumber + item.id
              );
            });
          });
        } else {
          this.showLength.oneLength = this.glassPostionA.length;
        }
      },
      deep: true,
    },
    glassPostionB: {
      handler(newValue, oldValue) {
        this.glassInfo = this[this.showGlassPostion];
        if (newValue.length != 0) {
          let that = this;
          this.useLine2 =
            JSON.parse(sessionStorage.getItem("useLine2" + this.lineNumber)) ||
            [];
          //第一次遍历出新增的玻璃
          newValue.forEach((item) => {
            if (this.useLine2.includes(item.id)) return;
            this.useLine2.push(item.id);
            sessionStorage.setItem(
              "useLine2" + this.lineNumber,
              JSON.stringify(this.useLine2)
            );
            this.$nextTick(() => {
              // that.showLength.oneLength -= 1;
              this.showLength.twoLength = this.glassPostionB.length - 1;
              that.animeGlass2(
                that.lineNumber,
                ".A" + that.lineNumber + item.id,
                that.completeGlass1.length - 1
              );
            });
          });
        } else {
          this.showLength.twoLength = this.glassPostionB.length;
        }
      },
      deep: true,
      immediate: true,
    },
    glassPostionC: {
      handler(newValue, oldValue) {
        this.glassInfo = this[this.showGlassPostion];
        if (newValue.length != 0) {
          let that = this;
          that.useLine3 =
            JSON.parse(sessionStorage.getItem("useLine3" + this.lineNumber)) ||
            [];
          newValue.forEach((item, index) => {
            if (that.useLine3.includes(item.id)) return;
            that.useLine3.push(item.id);
            sessionStorage.setItem(
              "useLine3" + that.lineNumber,
              JSON.stringify(that.useLine3)
            );
            let className = ".A" + this.lineNumber + item.id;
            that.$nextTick(() => {
              that.showLength.twoLength -= 1;
              that.showLength.threeLength = that.glassPostionC.length - 1;
              that.animeGlass3(className, index);
            });
          });
        } else {
          this.showLength.threeLength = this.glassPostionC.length;
        }
      },
      immediate: true,
    },
    glassPostionD: {
      handler(newValue, oldValue) {
        if (newValue.length != 0) {
          let that = this;
          that.useLine4 =
            JSON.parse(sessionStorage.getItem("useLine4" + this.lineNumber)) ||
            [];
          newValue.reverse().forEach((item, index) => {
            if (this.useLine4.includes(item.id)) return;
            this.useLine4.push(item.id);
            sessionStorage.setItem(
              "useLine4" + that.lineNumber,
              JSON.stringify(that.useLine4)
            );
            let className = ".A" + this.lineNumber + item.id;
            that.showLength.threeLength -= 1;
            this.animeGlass4(className, index);
          });
        }
      },
      deep: true,
      immediate: true,
    },
    datalength: {
      handler() {
        if (this.datalength != 0 && this.initTime) {
          this.initData();
          this.initTime = false;
        }
      },
      immediate: true,
    },
  },
  computed: {
    showTableData() {
      return [...this.glassPostionD];
    },
    datalength() {
      return (
        [
          ...this.glassPostionA,
          ...this.glassPostionB,
          ...this.glassPostionC,
          ...this.glassPostionD,
        ].length || 0
      );
    },
  },
  filters: {},
};
</script>

<style lang="scss" scoped>
.slider {
  position: absolute;
  width: 100%;
  height: 20%;
  display: flex;
}

.readText {
  position: absolute;
  top: 5px;
  cursor: pointer;
  left: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  letter-spacing: 0.5px;
  font-size: 24px;
  font-weight: bold;
  z-index: 999;
  // color: #0078d4;
  font-size: 24px;
  background-color: #fff;
  background-color: #23a8f2;
}

.silder_view {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0);

  .glass_slider {
    position: absolute;
    right: 0;
    width: 25px;
    height: 35px;
    background-color: rgba(166, 202, 240, 0);
    cursor: pointer;
    font-weight: bold;
  }
  .glass_length {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    width: 25px;
    height: 35px;
    font-weight: bold;
    background-color: #23a8f2;
  }
  .glass_length2 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    width: 35px;
    height: 25px;
    font-weight: bold;
    background-color: #23a8f2;
  }
  .circle {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid #e2e4ea;
    padding: 2px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 5%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .descript {
    font-size: 14px;
    color: gray;
    margin-left: 10px;
  }
  .circle-active {
    min-width: 16px;
    height: 16px;
    background-color: #23d96e;
    border-radius: 50%;
  }
  .circle-forbid {
    min-width: 16px;
    height: 16px;
    background-color: yellow;
    border-radius: 50%;
  }
  .circle-stop {
    min-width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
  }
}

.silde_action {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.glassLeft {
  cursor: pointer;
  position: absolute;
  left: 25px;
  top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 30px;
  height: 30px;
  letter-spacing: 0.5px;
  font-size: 15px;
  font-weight: bold;
  // color: #0078d4;
  background-color: #23a8f2;
  font-size: 24px;
  z-index: 999;
}
</style>
>
